<template>
  <div id="reward">
    <ul class="download">
      <li><span> 下载量 </span></li>
      <li><h1>{{rewardObj.downloads}}</h1></li>
      <li>
        <Button type="error" shape="circle" class="btn-reward" @click="isOpen = true"> 打 赏 </Button>
      </li>
      <li>
        <div class="btn-download">
          <div class="btn-wrap">
            <span :style="'top:' +[ topPixels + 'px']"></span>
            <template v-for="(btn,index) in rewardObj.buttons">
              <a href="javascript:;" @mouseover="changeTopPixel(index)">{{btn.text}}</a>
            </template>
          </div>
        </div>
        <div class="alert">
          <Alert type="error" v-if="rewardObj.showAlert">
            <template slot="desc"> 因版权问题，该软件已下架，仅提供官方链接！ </template>
          </Alert>
        </div>
      </li>
    </ul>
    <ul class="basic-info">
      <li><h4>基本信息</h4></li>
      <li><p><span>最新版本</span><b>{{rewardObj.version}}</b></p></li>
      <li><p><span>类别</span><b>{{rewardObj.type}}</b></p></li>
      <li><p><span>更新时间</span><b>{{rewardObj.time | dateWhole}}</b></p></li>
    </ul>
    <component is="Modal" :isOpen="isOpen" @closeModel="closeModel"></component>
  </div>
</template>
<script>
  import Modal from './Modal.vue'
  export default {
    name: 'reward',
    components: {Modal},
    props: ['rewardObj'],
    data () {
      return {
        isOpen: false,
        topPixels: 0
      }
    },
    methods: {
      closeModel () {
        this.isOpen = !this.isOpen
      },
      changeTopPixel (index) {
        if (index === 1) {
          this.topPixels = 40
        } else {
          this.topPixels = 0
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  backGroundColor = #363f48
  backGroundColor-blue = #5cadff
  buttonRewardShadowColor = #f16543;

  .reward {
    ul.download {
      text-align: center;
      margin: 1em 0;
      li {
        margin: .5em 0;
      }
      .reward-title-model {
        height: 80px;
        background url("../assets/reward-tittle-bg.jpg") no-repeat center;
        background-size 100%;
        line-height: 80px;
        font-size 15px;
        color: #aaa;
      }
      .btn-download {
        margin: 2em;
        background: backGroundColor;
        border-radius 5px;
        padding: 8px
        .btn-wrap {
          position relative
          padding: 0 5px
          a {
            color: #fff;
            display: block;
            position relative;
            font-size: 14px
            line-height: 40px;
          }
          span {
            position: absolute;
            width: 100%;
            height: 40px;
            background: backGroundColor-blue;
            border-radius 5px;
            left: 0;
            top: 0;
            transition all .3s ease-in;
          }
        }
      }
      .alert {
        padding: 0 2em
      }
    }
    ul.basic-info {
      margin: 2em;
      li {
        margin: .5em 0;
        b {
          float: right;
        }
      }
    }
  }

  .btn-reward {
    width: 120px;
    height: 40px;
    line-height: 20px;
    font-size: 20px;
    box-shadow: 0 6px 0 buttonRewardShadowColor;
  }

</style>
